<template>
  <el-dialog
    :before-close="dialog.handleClose()"
    :close-on-click-modal="dialog.closeModal"
    :close-on-press-escape="dialog.closeEsc"
    :modal="dialog.modal"
    :show-close="dialog.showClose"
    :title="dialog.title"
    :visible.sync="dialog.visible"
    :fullscreen="dialog.fullscreen"
    :destroy-on-close="true"
    :width="dialog.width"
    @close="closeCallBack"
  >
    <div class="app-container">
      <slot />
    </div>
    <div class="dialog-footer" slot="footer" style="text-align: center;">
      <template v-for="(btn, index) in dialog.btn">
        <RHButton
          :btn="btn"
          :key="index.toString() + 1"
          style="margin:5px;"
        ></RHButton>
      </template>
      <RHButton
        :btn="{ value: '关闭', click: close }"
        style="margin:5px;"
        v-if="dialog.close"
      />
    </div>
  </el-dialog>
</template>

<script>
import RHButton from "@/common/button/index";
import _ from "lodash";
export default {
  name: "index",
  components: {
    RHButton
  },
  props: {
    RHDialog: {}
  },
  data() {
    return {
      dialog: {
        modal: true, //遮罩层
        closeModal: false, //点击遮罩层关闭弹窗
        showClose: true, //显示关闭按钮
        closeEsc: true, //是否可以通过esc关闭
        fullscreen: false, //是否全屏
        width: "70%",
        visible: false,
        close: true,
        title: "",
        btn: [],
        handleClose: function() {} //关闭的回调
      }
    };
  },
  methods: {
    closeCallBack() {
      this.$forceUpdate();
    },
    closeShow() {
      //嵌套过多手动更新数据
      this.closeCallBack();
      this.dialog.visible = !this.dialog.visible;
    },
    close() {
      //嵌套过多手动更新数据
      this.closeCallBack();
      this.dialog.visible = false;
    },
    show() {
      this.closeCallBack();
      this.dialog.visible = true;
    },
    initializeDialog() {
      this.dialog = _.defaultsDeep(this.RHDialog, this.dialog);
    }
  },
  watch: {
    "dialog.visible": function(val, oldVal) {
      //嵌套过多手动更新数据
      this.$forceUpdate();
    }
  },
  mounted() {
    this.initializeDialog();
  }
};
</script>

<style scoped></style>
